視覺在用PSD做設計時，要考量的小技巧
IE 7 8 對opacity的支援度不佳，所以用jQ做 fedein out 的效果時要注意，這次這個案子最後的解法是捨png24 改用png8，一但用了png8就很悲情的要對位置對到快死。

另外因為這次的美術設計版面時，採用了大量的濾色、覆蓋、色彩增殖之類的圖層特效，造成每個元件在psd裡都無法獨立，圖層互相影响，我以前自己在做圖時也會有這種情形，因為拿張素材濾色或增殖下去效果就很華麗，叫人不愛用也難。

但是考慮到要做成元件各自分開的網頁時，大量的使用濾色或是色彩增殖這種會往下影响到背景的特效，就要小心，不然就會設計出，你在PSD裡看到是分圖層包好都獨立的元素，但其實圖層一合併就會因為背景消失而產生破圖慘況，不是元件上的特效跑出來，就是背景沒吃到特效，最好只好變成一大張動不得尺寸的固定圖…

所以這裡幾個技巧可以分享給設計者，重點就是多利用遮色片讓元件的特效可以獨立，而不是所有元素的特效都一路往下堆疊到背景色上。

首先大略解釋一下PS圖層特效裡 濾色、覆蓋、色彩增殖的原理，其實就是取該圖層的彩度、依不同明度比率蓋到背景上，所以在深色背景上再加一個圖層設為濾色時，只有明度較高的部分會保留下來，深色會在明度125以下的會消失在背景中。色彩增殖等”加深”類的圖層特效就是反過來，高明度的色彩會消失在背景中。

這種依明度來取決像素存在的合成法，就是造成背景抽掉後破圖的主因。

所以針對特效圖層屬性來處理，等你做好圖後，將想要保留的元素最大框複製一份後將底色套用 “剪裁遮色片” 至外框再合併圖層，就會得到一個有背景圖的底框圖層。

然後再把上面的特效複製一份，再一次利用剪裁遮色片把特效會溢出的部分都保留在剛才處理出來的底框圖層上，這樣特效不會跑出來，圖也不會變色，合併後依然可以拿到美麗的半透明圖片。

簡單來說，就是把元素的外框切出來，然後將背景色套上去，再把特效壓在這個有背景色的框上，合併後就不會有特效跑色的問題了。
chibc-blog 同步